<!--稿件管理页-->
<template>
  <el-radio-group v-model="type" @change="loadContents()">
    <el-radio-button v-for="c in catTypeArr" :label="c.type">{{ c.name }}</el-radio-button>
<!--    <el-radio-button label="1">烘焙食谱</el-radio-button>-->
<!--    <el-radio-button label="2">烘焙视频</el-radio-button>-->
<!--    <el-radio-button label="3">行业资讯</el-radio-button>-->
  </el-radio-group>
  <el-button type="primary" @click="router.push('/personal/post')" style="margin-left:20px; margin-top:7px;">
    发布内容
  </el-button>
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
    <el-table-column prop="title" label="标题" width="290" align="center"></el-table-column>
    <el-table-column prop="categoryName" label="分类" width="80" align="center"></el-table-column>
    <el-table-column prop="viewCount" label="浏览量" width="80" align="center"></el-table-column>
    <el-table-column prop="commentCount" label="评论量" width="80" align="center"></el-table-column>
    <el-table-column prop="createTime" label="发布时间" width="120" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button-group>
          <el-button type="success" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
//点击修改跳转到指定内容的发布页面进行编辑
const edit =(c)=>{
  router.push('/personal/post?id='+c.id);
}

const del = (i,c)=>{
  if(confirm('您确认要删除此内容吗?')){
    axios.post('http://localhost:8080/v1/contents/'+c.id+'/delete')
        .then((response)=>{
      if(response.data.code==2001){
        arr.value.splice(i,1);
        ElMessage.success('删除内容成功!');
      }
    })
  }
}

const arr = ref([]);
const type = ref('1');
const catTypeArr = ref([]);

onMounted(()=>{
  //发请求获取一级分类数据
  axios.get('http://localhost:8080/v1/categories/type')
  .then((response)=>{
    if(response.data.code==2001){
      catTypeArr.value=response.data.data;
    }
  })
  //首次进入页面也需要加载表格数据
  loadContents();
})
//后续每次切换一级分类，就重新加载数据
const loadContents = ()=>{
  //获取当前用户数据
  let user = localStorage.user?JSON.parse(localStorage.user):null;
  //准备发请求的数据 当前用户 当前类型
  let data = qs.stringify({userId:user.id,type:type.value});
  //发请求获取稿件管理页面表格中的所有数据，存入arr数组中
  axios.get('http://localhost:8080/v1/contents/management?'+data)
      .then((response)=>{
        if(response.data.code==2001){
          arr.value = response.data.data;
        }
      })
}
</script>

<style scoped>

</style>